<script lang="ts" setup>
import { useRouter } from 'vue-router';

import {onMounted, onUnmounted, ref} from "vue";
let datalist = <any>ref([])
const fillData = {
   img:'',
   title:'Vue & Vite：现状与未来 ',
   author:"cc"
}
const routerMap = useRouter()
const { currentRoute } = routerMap

datalist.value = Array(20).fill(fillData)

const tabs = ref()
tabs.value = [
      {title:'作品 0',active:true},
      {title:'喜欢',active:false,suffix:"lock"},
      {title:'收藏',active:false,suffix:"lock"},
      {title:'观看历史',active:false}
]
onUnmounted(()=>{
    const header:any = document.getElementById('header')
    header.style.cssText = ''
})
// 处理头部定位问题
// const scrollH  = debounce(function(header:any){
    
// },50)

onMounted(()=>{
    const header:any = document.getElementById('header')
    header.style.cssText = `position:absolute;border-bottom:1px solid #ffffff1a;width: calc(100% - var(--navigation-width));color:white`
    document.addEventListener('scroll',function(){
        // scrollH(header)
        const top = document.scrollingElement?.scrollTop??0
        if(top>=header.offsetHeight){
            header.style.cssText = `position:fixed;background-color:var(--color-bg-b0);width: calc(100% - var(--navigation-width));color: var(--color-text-t3)`
        }else{
            if(top<=0&&currentRoute.value.name !== 'vs' ){
                header.style.cssText = ``
            }else{
                header.style.cssText = `position:absolute;border-bottom:1px solid #ffffff1a;width: calc(100% - var(--navigation-width));color:white`
            }
        }
    })
})

</script>

<template>
      <div style="height: 100vh; width: calc(100% + var(--navigation-width));position: fixed;top: 0;background:var(--color-bg-b0);z-index: 1;left:calc(0px - var(--navigation-expend-width));"> </div>
      <!-- <div id="bg_cover">
            
        </div> -->
      <div id="scroll-wrap" >

            <div id="slider" style="height: 420px;position: relative;">
                <div>
                    <div class="slider-cover-1"  style="width: 300px; height: 100%; position: absolute;left: 0;top: 0; background: linear-gradient(270deg,rgba(255,255,255,0) 0%,var(--color-bg-b0)100%);z-index: 4;">    </div>
                    
                    <div class="slider-cover-2" >    </div>
                    
                    <div class="slider-cover-3" style="pointer-events: none;height: 173px;width: 100%;background: linear-gradient(rgba(22,23,34,.7) 12.72%,rgba(22,23,34,0) 100%);position: absolute;top: 0;"> </div>
                    
                    <div class="slider-cover-4" style="width: 420px; height: 100%; position: absolute;right: 0;top: 0;     background: linear-gradient(90deg,rgba(22,23,34,0) 0%,rgba(22,23,34,.3) 23.39%,rgba(22,23,34,.62) 52.92%,rgba(22,23,34,.9) 100%);z-index: 2;">    </div>
                </div>
                
                    <div id="slider-wrap" style="width: 100%;height: 100%;background-position: 50%; background-size: cover; background-image: url(./src/assets/slider-images/img_1.jpg);">1</div>
                    <!-- <div style="position: relative;z-index: 1; height: 100%;"></div> -->
                
                
            </div>
            <div class="content-wrap">
                <div>
                    <div style=" width: 100%; z-index: 20;margin-top: -43px;display: flex;position: relative;">
                        <div class="nav-item nav-item-w">
                            <h3>综艺</h3>
                            <span>自制综艺热播中</span>
                        </div>
                        <div class="nav-item nav-item-w">
                            <h3>电视剧</h3>
                            <span>经典剧集随心看</span>
                        </div>
                        <div class="nav-item nav-item-w">
                            <h3>电影</h3>
                            <span>免费大片看不停</span>
                        </div>
                        <div class="nav-item nav-item-w">
                            <h3>纪录片</h3>
                            <span>记录世间万象</span>
                        </div>
                        <div class="nav-item nav-item-w">
                            <h3>动画</h3>
                            <span>乐享精彩番剧</span>
                        </div>
                        <div class="nav-item" style="width:86px;background-color:#ecedee80;">
                            <h3><SvgIcon :iconSize="1.4" name="clock" /></h3>
                            <span>观看历史</span>
                        </div>
                    </div>
                </div>
                <div style=" width: 100%;margin-top:50px; ">
                    <div style="margin:20px 0">
                        <h3 style="margin:1.2rem 0; display: flex;color: var(--color-text-t1); font-weight: 400;font-size: 24px; ">
                            <SvgIcon :iconSize="1.6" name="hot-color" style="margin-right: .1rem;;" /> 热门推荐
                        </h3>
                        <div class="cards">
                            <div class="img-card" v-for="item in Array.from({length:12},()=>{ return {bg:'rgb('+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+','+ Math.floor(Math.random() * 256)+',0.05)',img:`https://picsum.photos/200/260/?`+Math.random() } }) "> 
                                <div class="img" :style="{backgroundColor:item.bg,backgroundImage:`url(${item.img})`}" style="background-size: cover;background-position: center;"> </div>
                                <div class="info" style="--lineClamp:1">  
                                    <div class="text-box title"> {{ item.img }} </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="margin:20px 0" v-for="item in ['综艺','电视剧','电影','纪录片','动画'] ">
                        <div style="display: flex; width: 100%; align-items: center;color: var(--color-text-t1);">
                            <h3 style="margin:1.2rem 0; display: flex; font-weight: 400;font-size: 24px; flex-grow: 1; ">
                             {{ item }} 
                            </h3>
                            <div style=" width: 60%; display: flex;justify-content: flex-end;align-items: center;" > 
                                <span>更多</span>
                                <SvgIcon :iconSize="0.725" name="right" style="margin: 0 .3rem;" /> 
                            </div>
                        </div>
                        <div class="cards" style="flex-wrap: nowrap">
                            <div class="img-card" v-for="item in Array.from({length:12},()=>{ return {bg:'rgb('+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+','+ Math.floor(Math.random() * 256)+',0.04)',img:`https://picsum.photos/200/260/?`+Math.random() } }) "> 
                                <div class="img" :style="{backgroundColor:item.bg,backgroundImage:`url(${item.img})`}"> </div>
                                <div class="info" style="--lineClamp:1">  
                                    <div class="text-box title"> {{ item.img }} </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                
                </div>
            </div>
            
      </div>
      
      
</template>
<style>
body::-webkit-scrollbar{ width: 0;}
</style>
<style scoped>
.cards{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: space-between;
            margin: 0 -7px;
            overflow: hidden;
}
.img-card {
    cursor: pointer;
    --vs-card-count: 6;
    --vs-card-margin: 14px;
    width: calc(100%/var(--vs-card-count) - var(--vs-card-margin));
    margin:calc(var(--vs-card-margin)/2);
    flex: none;
    border-radius: .825rem;
    background-color: var(--color-bg-b2);
    overflow: hidden;
}

.img-card .img{ 
    width: 100%; background-color:#d2d2d2; 
    padding-top: 130%; background-color: var(--color-bg-b1);
    border: 0.5px solid rgba(22,24,35,.06);
    border-color: var(--color-line-l3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img-card .info{
    padding: 0.5rem;
}
.img-card .info .title{ 
    margin: 0.4rem 0;
}

.img-card:hover{ transform: scale(1.05);transition: transform 0.2s;  }

@media (max-width: 873px) {
    .img-card {
        --vs-card-count:3
    }
}

@media (max-width: 1240px) and (min-width:874px) {
    .img-card {
        --vs-card-count:4
    }
}

@media (max-width: 1624px) and (min-width:1240px) {
    .img-card {
        --vs-card-count:5
    }
}

@media (max-width: 1920px) and (min-width:1625px) {
    .img-card {
        --vs-card-count:6
    }
}

@media (min-width: 1920px) {
    .img-card {
        --vs-card-count:8
    }
}

.slider-cover-2{
    width: 100%; height: 30%; position: absolute;left: 0;bottom: 0;    background: linear-gradient(rgba(255,255,255,0) 0%,#fff 100%);z-index: 3;  
}

html[dark] .slider-cover-2 {
    background: linear-gradient(rgba(22,23,34,0) 0%,#161722 87.28%);
}

.nav-item-w{min-width:120px; flex: 1;margin-right: 1rem;}

.nav-item{display: flex; height: 86px; flex-direction: column; background-color:#ecedee80;align-items: center;justify-content: center;border-radius: 1rem;;}
.nav-item h3{ line-height: 34px;font-size: 24px;font-weight: 400; }
.nav-item span{line-height: 24px; color: var(--color-text-t3);}
#bg_cover{
    height: 480px; width: 100%; position: absolute;top:calc(0rem - var(--header-height));z-index: -1;background-size:100% 150%;overflow: hidden;
}
#scroll-wrap{
    display: flex;flex-direction: column; justify-content: center;  position: relative;z-index: 4;
}
.content-wrap{margin: 0 auto;padding: 0 24px; width: 100%;}
@media (min-width: 1240px){
    .content-wrap{padding: 0 40px; }
}

</style>

